import React, { useState, useEffect } from 'react'

const Foo: React.FC = () => {
	const [loading, setLoading] = useState(true)
	/**
	 * 副作用钩子
	 * useEffect(() => {},[array])
	 * 第一个参数是你要进行的异步操作，
	 * 第二个参数是一个数组，
	 * 用来给出Effect的依赖项，
	 * 只要这个数组发生变化，useEffect()就会执行。
	 * ===
	 * React 保证了每次运行 effect 的同时，DOM 都已经更新完毕
	 * 什么是副作用呢，就是除了状态相关的逻辑，比如网络请求，监听事件，查找 dom。
	 * ===
	 * useEffect Hook 可以看做
	 * componentDidMount，
	 * componentDidUpdate，
	 * componentWillUnmount 这三个函数的组合。
	 *
	 */

	useEffect(() => {
		const id = setInterval(() => setLoading(!loading), 1000)
		return () => clearInterval(id)
	}, [loading])

	useEffect(() => {
		console.log('code...') // 相当于 componentDidMount、componentDidUpdate
		return () => console.log('code...') // 相当于 componentWillUnmount
	}, [])

	return (
		<>
			<div>{loading ? 'LoadingA...' : '异步请求完成...'}</div>
		</>
	)
}
export default Foo
